<template>
  <div id="Shenghuohui">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size:16px;">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/shenghuohui' }">民主生活会</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ name: 'ShenghuohuiDetail2022', params: {id: shenghuohuiId}}">{{shenghuohuiName}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{unitName}}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs v-model="activeName" type="border-card" @tab-click="tabClick" style="margin:0 0 0 10px">
      <el-tab-pane name="Huiqian">
        <span slot="label">会前 <i class="el-icon-caret-right"></i></span>
        <Huiqian :timestamp="huiqiantimestamp" :leaders="leaders"></Huiqian>
      </el-tab-pane>
      <el-tab-pane name="Huishang">
        <span slot="label">会中 <i class="el-icon-caret-right"></i></span>
        <Huishang :timestamp="huishangtimestamp" :leaders="leaders"></Huishang>
      </el-tab-pane>
      <el-tab-pane name="Huihou">
        <span slot="label">会后 <i class="el-icon-caret-right"></i></span>
        <Huihou :timestamp="huihoutimestamp" :leaders="leaders"></Huihou>
      </el-tab-pane>
      <!-- <el-tab-pane label="附件" name="Fujian">
        <Fujian :timestamp="fujiantimestamp"></Fujian>
      </el-tab-pane> -->
      <el-tab-pane label="质量评估" name="Pingjia">
        <Pingjia :timestamp="pingjiatimestamp"></Pingjia>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Huiqian from '@/Shenghuohui/Showdata2024/Huiqian.vue'
import Huishang from '@/Shenghuohui/Showdata2024/Huishang.vue'
import Huihou from '@/Shenghuohui/Showdata2024/Huihou.vue'
import Fujian from '@/Shenghuohui/Showdata2024/Fujian.vue'
import Pingjia from '@/Shenghuohui/Showdata2024/Pingjia.vue'
export default {
  components: {
    Huiqian,
    Huishang,
    Huihou,
    Fujian,
    Pingjia
  },
  watch: {
    '$store.state.link1' (val) {
      console.log('link1' + this.$store.state.link1)
      console.log('activeNameold' + this.activeName)
      this.activeName = this.$store.state.link1
      console.log('activeNamenew' + this.activeName)
      this.getAllData()
    }
  },
  data () {
    return {
      leaders: [],
      shenghuohui: {
        UnitName: '',
        ShenghuohuiId: '',
        ShenghuohuiName: ''
      },
      shenghuohuiName: '',
      shenghuohuiId: 0,
      unitName: '',
      listLoading: false,
      totalnum: 0,
      Sortkey: '',
      Isace: true,
      activeName: 'Huiqian',
      activeNameHuihou: 'bzzgqd',
      huiqiantimestamp: '',
      huishangtimestamp: '',
      huihoutimestamp: '',
      fujiantimestamp: '',
      shenghuohuinameshow: false,
      fileList: [],
      pingjiatimestamp: ''
    }
  },
  methods: {
    getLeaders () {
      let para = {
        shenghuohuiunitId: this.$route.params.id,
        pageNum: 1,
        pageSize: 2000
      }
      // var personParams = { Page: 0, Pagenum: 20, Personname: '', Unitkey: '', Sortkey: '', Isace: true, timestamp: new Date().getTime() }
      this.$http
        .post(this.$http.defaults.shenghuohuiAPI + `api/newHqLingdao/queryByPage`, para)
        .then(response => {
          if (response.data.success === true) {
            this.leaders = response.data.result.records
          } else {
            console.log('获取数据失败:' + response.data.message)
            this.$message({
              message: '获取数据失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    getAllData () {
      if (this.activeName === 'Huiqian') {
        this.huiqiantimestamp = new Date().getTime()
      }
      if (this.activeName === 'Huishang') {
        this.huishangtimestamp = new Date().getTime()
      }
      if (this.activeName === 'Huihou') {
        this.huihoutimestamp = new Date().getTime()
      }
      if (this.activeName === 'Fujian') {
        this.fujiantimestamp = new Date().getTime()
      }
      if (this.activeName === 'Pingjia') {
        this.pingjiatimestamp = new Date().getTime()
      }
    },
    tabClick () {
      this.getAllData()
      var params = {Link1: this.activeName}
      this.$store.commit('tablink1', params)
    },
    getUnitDetails () {
      this.$http
        .get(this.$http.defaults.shenghuohuiAPI + `api/shenghuohuiunit/getById?id=` + this.$route.params.id)
        .then(response => {
          if (response.data.success === true) {
            this.unitName = response.data.result.unitName
            this.shenghuohuiId = response.data.result.shenghuohuiId
            this.shenghuohuiName = response.data.result.shenghuohui.name
          } else {
            console.log('获取数据失败:' + response.data.message)
            this.$message({
              message: '获取数据失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    }
  },
  mounted () {
    this.getLeaders()
    this.getUnitDetails()
    var params = {Link1: 'Huiqian'}
    this.$store.commit('tablink1', params)
    var paramsHq = {Link_hq: 'Fangan'}
    this.$store.commit('tablink_hq', paramsHq)
    var paramsHz = {Link_hz: 'HS_HuiYiYiCheng'}
    this.$store.commit('tablink_hz', paramsHz)
    var paramsHh = {Link_hh: 'HH_BanZiZhengGai'}
    this.$store.commit('tablink_hh', paramsHh)
  }
}
</script>
<style scoped>
#Shenghuohui{
  padding: 0
}
</style>
<style>
#huishangdiv .el-table th{
  border-right: 1px solid #95B8E7 !important;
  border-bottom: 1px solid #95B8E7 !important;
}
#Shenghuohui .el-tabs__item.is-active{
    color: #fff !important;
    background: #0058AC;
}
#Shenghuohui .el-tabs__item is-left{
  width:50px;
}
</style>
